<template>
  <div>
    <slot name="title" v-if="title">
      <div class="title_class">表头名称</div>
    </slot>
    {{ columns }}
    <slot name="">
      <el-form :model="formData">
        <template v-for="(item, num) in columns">
          <!-- 文本框 -->
          <el-form-item
            :label="item.label"
            v-if="!item.type"
            :rules="item.rules"
            :prop="item.field"
          >
            <el-input
              v-model="formData[item.field]"
              :placeholder="item.label"
              :disabled="item.disabled"
              @change="change"
            ></el-input>
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item
            :label="item.label"
            v-else-if="item.type === 'radio'"
            :rules="item.rules"
            :prop="item.field"
          >
            <el-radio-group
              v-model="formData[item.field]"
              :disabled="item.disabled"
            >
              <template v-for="(r, n) in item.options.data">
                <el-radio :label="r.value">{{ r.label }}</el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
          <!-- 多选框 -->
          <el-form-item
            :label="item.label"
            v-else-if="item.type === 'checkbox'"
            :rules="item.rules"
            :prop="item.field"
          >
            <el-checkbox-group
              v-model="formData[item.field]"
              :disabled="item.disabled"
            >
              <template v-for="(r, n) in item.options.data">
                <el-checkbox :label="r.value">{{ r.label }}</el-checkbox>
              </template>
            </el-checkbox-group>
          </el-form-item>
          <!-- 下拉框 -->
          <el-form-item
            :label="item.label"
            v-else-if="item.type === 'select'"
            :rules="item.rules"
            :prop="item.field"
          >
            <yu-select
              select
              lab="label"
              val="value"
              checkStrictly
              :options="item.options.data"
              placeholder="请选上级菜单"
              v-model:value="formData[item.field]"
              @change="change"
              :disabled="item.disabled"
            />
          </el-form-item>
          <!-- 文本域 -->
          <el-form-item
            :label="item.label"
            v-if="item.type === 'textarea'"
            :rules="item.rules"
            :prop="item.field"
          >
            <el-input
              v-model="formData[item.field]"
              :placeholder="item.label"
              :disabled="item.disabled"
              type="textarea"
            ></el-input>
          </el-form-item>
          <!-- 密码框 -->
          <el-form-item
            :label="item.label"
            v-if="item.type === 'password'"
            :rules="item.rules"
          >
            <el-input
              v-model="formData[item.field]"
              :placeholder="item.label"
              :disabled="item.disabled"
              type="password"
            ></el-input>
          </el-form-item>
        </template>
      </el-form>
    </slot>
    <div>
      <el-button @click="getFormData"> 取值</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRef, onMounted, getCurrentInstance } from 'vue';
const props = defineProps({
  title: {
    type: Boolean,
    default: true,
  },
  columns: {
    type: Array,
    default: [],
  },
  formData: {
    type: Object,
    default: {},
  },
});
const formData = toRef(props, 'formData');
const emits = defineEmits(['change']);
const getFormData = () => {
  console.log(formData.value);
};
const change = val => {
  console.log(val);
  emits('change');
};
</script>
<style lang="scss" scoped></style>
